<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>h5</title>
    <script type='text/javascript' src='/public/js/lib/d3.min.js' chartset='utf-8'></script>
</head>
<body>
<style>
    .view-box{
        width:700px;
        height:300px;
        position:relative;
        overflow:hidden;
    }
    .view-box embed{
        position:absolute;
        top:-700px;
    }
    .char-path{
        fill:#000;
    }
    .svg-iframe{
        width:890px;
        height:1710px;
        border-style:none;
        position: absolute;
        top: -656px;
    }
</style>
<div class="view-box">
    <iframe id="svgIframe" class="svg-iframe" src="/public/svg/module.svg"></iframe>
</div>
<script type="text/javascript" >
			window.onload = function(){
				var randomColor = function(){
				    var maxCount = 155 ;
                    var minCount = 120 ;
                    var color = ( minCount + Math.random() * ( maxCount-minCount ) ) ;
                    return 'rgb(' + color +
                        ',' + color +
                        ',' + color + ')' ;
				} ;
				var svgDoc = document.getElementById( 'svgIframe' ).contentWindow.document ;
				var path = d3.selectAll( svgDoc.querySelectorAll('.char-path') ) ;
				path.each(function(){
					var self = d3.select(this) ;
					self.style({
						'fill' : randomColor() ,
						'stroke' : randomColor()
					}).attr({
						'originD' : self.attr('d')
					}) ;
				}) ;

				var time = 200 ;
				var changePath = function( path  ){
					path.each(function(){
						var self = d3.select(this) ;
						var newD = self.attr('originD').replace(/([a-zA-Z]|\,)([0-9\.]+)/g,function($,s1,s2){
							return s1 + ( parseFloat(s2) + 0.9 * ( 0.5 - Math.random() ) ) + '';
						}) ;
						self.transition().duration(time+200).attr('d',newD).style({
						    'fill' : randomColor() ,
						    'stroke' : randomColor()
						}) ;
					}) ;
				} ;
				window.setInterval(function(){
					changePath( path  ) ;
				},time) ;
			} ;
		</script>

</body>
</html>